<template>
  <BaseMainSlot>
    <template v-slot:zhactbar>
      <ActionBar
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        :has-save="false"
        @add="add"
        @cancel="cancel"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:searchbox>
      <div class="label-input mr-20">
        <div class="label">个体名称:</div>
        <div class="input">
          <el-select
            v-model="condition.name"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in bionList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">耳标:</div>
        <div class="input">
          <el-input
            v-model="condition.number"
            clearable
            placeholder="请输入耳标"
          />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">设施名称:</div>
        <div class="input">
          <el-select
            v-model="condition.facilityGroupId"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in facilityList"
              :key="item.facilityGroupId"
              :label="item.groupName"
              :value="item.facilityGroupId"
            />
          </el-select>
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">死亡时间段:</div>
        <div class="input">
          <el-date-picker
            v-model="condition.deathStartTime"
            align="right"
            type="date"
            placeholder="选择开始日期"
            value-format="timestamp"
          />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="input">
          <el-date-picker
            v-model="condition.deathEndTime"
            align="right"
            type="date"
            placeholder="选择结束日期"
            value-format="timestamp"
          />
        </div>
      </div>
      <div class="search ml-20" @click="queryPageByCondition">
        <img src="~@/assets/action-bar-icon/search.png" />
      </div>
    </template>
    <template v-slot:content>
      <el-table
        ref="tableDataRef"
        :data="tableData"
        style="width: 100%"
        max-height="80%"
        border
        stripe
        highlight-current-row
        @current-change="handleCurrentChange"
        @selection-change="handleSelect"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="number" label="耳标" />
        <el-table-column prop="name" label="个体名称" />
        <el-table-column prop="facilityFullName" label="设施" width="150" />
        <el-table-column prop="gender" label="性别" width="150" />
        <el-table-column prop="age" label="年龄" width="150" />
        <el-table-column prop="causaDeath" label="死亡原因" />
        <el-table-column prop="deathTime" label="死亡时间" />
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="length"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
      <!-- 添加 -->
      <el-dialog title="添加死亡记录" :visible.sync="dialog">
        <el-form
          ref="formDataRef"
          :model="form"
          label-width="100px"
          label-position="left"
          :rules="rules"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="个体名称:">
                <el-select
                  v-model="form.bionId"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in bionList"
                    :key="item.bionId"
                    :label="item.name"
                    :value="item.bionId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="死亡日期:">
                <el-date-picker
                  v-model="form.deathTime"
                  align="right"
                  type="date"
                  placeholder="选择死亡日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="死亡原因:">
                <el-input
                  v-model="form.causaDeath"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="model-cancel-btn" @click="dialog = false">取 消</el-button>
          <el-button type="primary" class="model-submit-btn" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog title="修改死亡记录" :visible.sync="dialog2">
        <el-form
          ref="formDataRef"
          :model="form2"
          label-width="100px"
          label-position="left"
          :rules="rules"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="个体名称:">
                <el-select
                  v-model="form2.bionId"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in bionList"
                    :key="item.bionId"
                    :label="item.name"
                    :value="item.bionId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="死亡日期:">
                <el-date-picker
                  v-model="form2.deathTime"
                  align="right"
                  type="date"
                  placeholder="选择死亡日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="死亡原因:">
                <el-input
                  v-model="form2.causaDeath"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="dialog2 = false">取 消</el-button>
          <el-button class="zh-button-two" type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import Pagination from "@/components/Pagination";
import ActionBar from "@/components/ActionBar/index.vue";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import { mymixin } from "@/utils/mixin";
import req from "@/api/digital-production/health-management/death-record/index";
export default {
  name: "AbnormalDeathManagement",
  components: {
    Pagination,
    ActionBar,
    BaseMainSlot
  },
  mixins: [mymixin],
  data() {
    return {
      bionList: [],
      facilityList: [],
      condition: {},
      tableData: [],
      pageSize: 5,
      currentPage: 1,
      length: 0,
      // 当前状态, 0 默认状态 1 表示 添加, 2 表示 修改
      currentStatus: 0,
      dialog: false,
      dialog2: false,
      form: {},
      form2: {},
      // 按钮控制
      addActive: true,
      delActive: false,
      editActive: false,
      saveActive: false,
      cancelActive: false,
      // 选中的数据
      chooseData: {},
      chooseIdList: [],
      rules: {}
    };
  },
  mounted() {
    this.queryBionList();
    this.queryFacilityList();
    this.queryPageByCondition();
  },
  methods: {
    changeNowChanceStau(val) {
      this.dialog = true;
    },
    // 搜索条件相关
    queryBionList() {
      req
        .queryBionAll({
          breed: "HuSheep"
        })
        .then((res) => {
          if (res.code === 1) {
            let data = res.data || [];
            this.bionList = data;
            console.log(data);
          }
        });
    },
    queryFacilityList() {
      req.queryFacilityAll().then((res) => {
        if (res.code === 1) {
          let data = res.data || [];
          this.facilityList = data;
          console.log(data);
        }
      });
      // bion/v1/bion/queryBionAll/HuSheep
    },
    // 条件查询
    queryPageByCondition() {
      console.log(this.condition);
      req
        .queryPageByCondition({
          page: this.currentPage,
          size: this.pageSize,
          entity: this.condition
        })
        .then((res) => {
          if (res.code === 1) {
            let data = res.data || [];
            console.log(data);
            this.tableData = data.content;
            this.pageSize = data.size;
            this.length = data.totalElements;
          }
        });
    },
    // 分页
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.queryPageByCondition();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.queryPageByCondition();
    },
    // 表格相关处理
    handleSelect(arg) {
      let currentIdList = [];
      arg.forEach((element) => {
        currentIdList.push(element.bionAbnormalDeathId);
      });
      this.chooseIdList = currentIdList;
      console.log(this.chooseIdList);
      this.delActive = true;
      this.cancelActive = true;
      if (this.chooseIdList.length === 0) {
        this.delActive = false;
        this.cancelActive = false;
      }
    },
    handleCurrentChange(arg) {
      console.log(arg);
      this.chooseData = arg;
      // this.addActive = false;
      this.delActive = false;
      this.editActive = true;
      this.cancelActive = true;
    },
    // 菜单栏
    add() {
      this.dialog = true;
      this.currentStatus = 1;
    },
    cancel() {
      // this.addActive = true;
      this.delActive = false;
      this.editActive = false;
      this.cancelActive = false;
    },
    edit() {
      console.log(this.chooseData);
      this.form2 = this.chooseData;
      this.dialog2 = true;
      // this.addActive = false;
      this.delActive = false;
      this.editActive = false;
      this.cancelActive = false;
      this.currentStatus = 2;
    },
    del() {
      console.log(this.chooseIdList);
      req.delDeathRecord(this.chooseIdList).then((res) => {
        if (res.code === 1) {
          this.$message.success("删除成功");
          this.queryPageByCondition();
        } else {
          this.$message.error("添加失败\r\n, 失败原因:" + res.msg);
        }
      });
    },
    // 弹出层
    submit() {
      console.log(this.form);
      // 判断状态执行方法
      if (this.currentStatus === 1) {
        /* 添加 */
        req.addDeathRecord(this.form).then((res) => {
          if (res.code === 1) {
            this.dialog = false;
            this.$message.success("添加成功");
            this.queryPageByCondition();
          } else {
            this.$message.error("添加失败\r\n, 失败原因:" + res.msg);
          }
        });
      } else if (this.currentStatus === 2) {
        console.log(this.form2);
        /* 修改 */
        req.editDeathRecord(this.form2).then((res) => {
          if (res.code === 1) {
            this.dialog2 = false;
            this.$message.success("修改成功");
            this.queryPageByCondition();
          } else {
            this.$message.error("修改失败\r\n, 失败原因:" + res.msg);
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-table {
  overflow: auto;
}
::v-deep .el-input__inner {
  background-color: transparent;
}
::v-deep .el-form-item__label {
  color: #fff;
}
::v-deep .el-dialog__header {
  background-color: #006e91;
}
::v-deep .el-dialog__body {
  background: #f0f3f7;
  color: #fff;
  .el-input {
    width: 100%;
  }
  .el-select {
    //充满父元素（el-col）
    width: 100%;
  }
}
// 弹框底下按钮样式
.model-submit-btn{
background-color: #006e91;
    border-color: #006e91;
    &:hover{
      background-color: #006f91b9;
    border-color: #006f91b9;
    }
}
.model-cancel-btn{
  &:hover{
      background-color: #006f9128;
    border-color: #006e91;
    color:#006e91
    }
}
</style>
